<template>
  <view class="divination-order-container">
    <e-navbar leftTitle="占卜订单"></e-navbar>
  <!--  <view class="bg-white" :style="{'opacity':isOnload ? '1' : '0'}">
      <u-tabs
          :list="tabsList"
					:current="current"
          lineWidth="30"
          lineHeight="4"
          lineColor="#1F66FF"
          :inactiveStyle="{color: '#999999'}"
          :activeStyle="{color: '#181818'}"
          :scrollable="false"
          @click="handleChangeTabs"
      ></u-tabs>
    </view> -->
		<view class="tabs-list flex-between">
			<view 
			class="tabs-list_item flex-center"
			:class="{'active-tab':current == index}"
			v-for="(item,index) in tabsList" 
			:key="index"
			@click="handleChangeTabs(index)"
			>
			{{item.name}}
			</view>
		</view>
<!-- 		<u-gap height="15"></u-gap>
		<template>
		  <block v-for="(citem,cindex) in tabsList[current].list" :key="cindex">
		    <e-divination-card :type="index" :orderItem="citem"></e-divination-card>
		  </block>
		</template>
		<u-loadmore status="nomore" color="#999"/>
		<u-gap height="15"></u-gap> -->
    <swiper
			class="divination-order-swiper" 
			:current="current" 
			:style="{'height': scrollHeight + 'px'}"
			@change="handleChangeSwiper"
			>
      <swiper-item style="height: 100%" v-for="(item,index) in tabsList" :key="index">
        <scroll-view scroll-y style="height: 100%">
          <u-gap height="15"></u-gap>
          <template>
            <block v-for="(citem,cindex) in item.list" :key="cindex">
              <e-divination-card :orderItem="citem" @refresh="handleRefreshOrder"></e-divination-card>
            </block>
          </template>
          <u-loadmore status="nomore" color="#999"/>
          <u-gap height="15"></u-gap>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabsList: [
        {
          name: "全部",
          list: []
        },
        {
          name: "待付款",
          list: []
        },
        {
          name: "已完成",
          list: []
        },
      ],
      scrollHeight: 0,
      current: 0,
			isOnload:false,

    };
  },
  onShow() {
    this.getList();
  },
  onReady() {
		this.isOnload = true;
    this.getElInfo();
  },
  methods: {
    async getList(){
      let data = {}
      if(this.current !== 0){
        data.status = this.current;
      }
      // this.tabsList[this.current].list = [];
      const res = await this.$api.order_list(data);
      if(res.code == 1){
        this.tabsList[this.current].list = res.data;
        console.log(this.tabsList);
      }
      // for(let i = 0; i < this.tabsList.length; i++){
      //   for(let j = 0; j < 10; j++){
      //     this.tabsList[i].list.push({
      //       id: j + 1,
      //       title: "占卜标题占卜标题占卜标题占卜标题占卜标题占卜标题占卜标题占卜标题占卜标题占卜",
      //       money: "19.90",
      //       time: "2020.25.06 12:24:56",
      //       status: "待付款"
      //     })
      //   }
      // }
      console.log(this.tabsList);
    },
    // 刷新订单列表
    handleRefreshOrder(){
      this.getList();
    },
		handleChangeTabs(index){
			if(this.current == index) return;
			this.current = index;
      this.getList();
		},
    // handleChangeTabs(item){
    //   this.current = item.index;
    //   console.log(item);
    // },
		handleChangeSwiper(e){
			this.current = e.detail.current;
			console.log('xxxx',this.current,e.detail.current);
		},
    async getElInfo() {
      let systemInfo = this.$u.sys();
      let rectInfo = await this.$u.getRect('.divination-order-swiper');
      this.scrollHeight = systemInfo.windowHeight - rectInfo.top;
      console.log(this.scrollHeight);
    }
  }
}
</script>

<style lang="scss" scoped>
  .divination-order-container{
		.tabs-list{
			background: #fff;
			&_item{
				width: calc(100% / 3);
				height: 88rpx;
				color: #999;
				font-size: 26rpx;
			}
			.active-tab{
				color: #333 !important;
				position: relative;
			}
			.active-tab::before{
				content: "";
				display: block;
				width: 60rpx;
				height: 8rpx;
				background: #1F66FF;
				border-radius: 4rpx;
				position: absolute;
				left: 50%;
				bottom: 4rpx;
				transform: translateX(-50%);
			}
		}
    .divination-order-swiper{
    }
  }
</style>
